<template>
  <div id="all">
    <el-row>
      <el-col>
        <el-container id="searchBox" ref="searchBox">
          <about-me id="about"/>
          <search-bar id="searchbar" ref="searchBar" :box-width="searchBoxWidth"/>
          <walk-to id="walk"/>
        </el-container>
      </el-col>
    </el-row>
    <div id="layer_box">
      <button-layer id="button_layer"></button-layer>
    </div>
    <div id="container" ref="container">
      <stations-marker ref="stationMarker"/>
      <marker-legend id="markerLegend" ref="markerLegend"/>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {BaseConfig} from '../api/config'
import SearchBar from "./SearchBar";
import StationsMarker from "./StationsMarker";
import MapData from '../store/MapData'
import Feedback from "./Feedback";
import MarkerLegend from "./MarkerLegend";
import AboutMe from "./AboutMe";
import ButtonLayer from "./ButtonLayer";
import WalkTo from "./WalkTo";

export default {
  name: "MapContainer",
  components: {WalkTo, ButtonLayer, AboutMe, MarkerLegend, Feedback, StationsMarker, SearchBar},
  data() {
    return {
      map: null,
      searchBoxWidth: null
    }
  },
  methods: {
    //初始化地图
    initMap() {
      return new Promise((resolve, reject) => {
        AMapLoader.load({
          key: BaseConfig.AmapKey,             // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          //version: "1.4.15",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          AMapUI: {             // 是否加载 AMapUI，缺省不加载
            version: '1.1',   // AMapUI 缺省 1.1
            plugins: [],       // 需要加载的 AMapUI ui插件
          }
        })
          .then((AMap) => {
            //-------------地图初始化设置开始
            this.map = new AMap.Map("container", {  //设置地图容器id
              resizeEnable: true,
              viewMode: "2D",    //是否为3D地图模式
              zoom: 13,           //初始化地图级别
              center: [113.445970, 23.142824], //初始化地图中心点位置
              layers: [
                // new AMap.TileLayer.RoadNet(),
              ]
            });
            let map = this.map;

            // 同时引入工具条插件，比例尺插件和鹰眼插件
            AMap.plugin([
              'AMap.ToolBar',
              'AMap.Scale',
              'AMap.HawkEye',
              'AMap.MapType',
              'AMap.Geolocation',
            ], function () {
              // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
              map.addControl(new AMap.ToolBar());

              // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
              map.addControl(new AMap.Scale());

              // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
              map.addControl(new AMap.HawkEye({isOpen: true}));

              // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
              map.addControl(new AMap.MapType());

              // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
              // map.addControl(new AMap.Geolocation());
            });

            MapData.setAMap(AMap);
            MapData.setMap(this.map);
            //-------------地图初始化设置结束
            resolve("MapContainer初始化完毕");
          })
          .catch(e => {
            console.log(e);
            reject();
          })
      })

    },
  },
  computed: {},
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap().then(msg => {
        console.log(msg);
        // this.$refs.searchBar.initSearchBar();
        this.$refs.stationMarker.initMarkers();
        //获取searchBox的值
        this.searchBoxWidth=this.$refs.searchBox.$el.clientWidth;
      }
    )
  }
}
</script>

<style>

html, body {
  height: 100%;
  margin: 0;
}

#all {
  position: relative;
  height: 100%;
}

#container {
  position: relative;
  padding-top: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#searchBox {
  position: absolute;
  z-index: 2;
  width: auto;
  height: 50px;
  background: white;
  left: 15px;
  top: 15px;
  box-sizing: border-box;
  border-radius: 3px;
  box-shadow: 0 2px 2px rgb(0 0 0 / 15%);
}

#searchbar {
  z-index: 3;
  margin-top: 5px;
  padding-right: 5px;
}

#walk {
  z-index: 3;
  width: 50px;
  height: 50px;
  text-align: center;
  background-color: #f8f8f8;
  border-radius: 0 3px 3px 0;
}

#layer_box {
  position: absolute;
  background: #fff;
  z-index: 3;
  top: 15px;
  border-radius: 3px;
  left: calc(100% - 385px);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
  height: 45px;
  width: 225px; /*每个按钮75px*/
}

#button_layer {
  z-index: 2;
  background: #fff;
  border-radius: 3px;
  padding: 14px 0 13px;
  height: 18px;
}

#markerLegend {
  position: absolute;
  z-index: 3;
  width: 200px;
  margin-left: 5px;
  bottom: 15%;
}
</style>
